import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import pageStyles from '@/common/pageLayout.less';
import { Ref, useCallback, useRef, useState } from 'react';
import { Form, Row, Col, Select, Input, message, Spin } from 'antd';
import { onCloseModalCommon } from '@/utils';
import { AuditPlanMaterialServices } from '../services/SyncMaterialService';

/**
 * 单个审核和批量审核物料【Modal】
 * */
export const AuditModal = ({ isShowAudit, onClose, getPlanInfo }: Record<string, any>) => {
  /**
   * modal的Ref
   * */
  const AuditModalRef: Ref<IOneModalRef> = useRef(null);

  /**
   * 判断文本框是否输入过
   * */
  const [isEnter, setIsEnter] = useState<boolean>(false);

  /**
   * 审核接口回调
   * */
  const AuditPlanMaterialCallback = (res: any) => {
    if (res?.msgFlag) {
      message.success(res?.msg);
      getPlanInfo();
      onCloseModalCommon(AuditModalRef);
    }
  };

  /**
   * 审核接口
   * */
  const { auditPlanRun, auditPlanLoading } = AuditPlanMaterialServices(AuditPlanMaterialCallback);

  /**
   * 表单对象
   * */
  const [auditMetailFrom] = Form.useForm();

  /**
   * 审核结果
   * */
  const [auditStateArr, setauditStateArr] = useState([
    {
      id: '1',
      name: '是',
    },
    {
      id: '2',
      name: '否',
    },
  ]);

  const onModalOk = useCallback(() => {
    /**
     * ======演示注释======
     * 【接口调用】
     * */
    auditMetailFrom?.validateFields()?.then((res) => {
      let resObj = {
        ...res,
        needMaterialIds: isShowAudit?.selectId,
        purchaseNeed: {
          versionNum: isShowAudit?.planInfo?.versionNum,
          id: isShowAudit?.planInfo?.id,
        },
      };
      auditPlanRun(resObj);
    });

    // onCloseModalCommon(AuditModalRef)
    // message.success('审核成功')
  }, [auditMetailFrom]);

  return (
    <OneModal
      open={true}
      getContainer={false}
      ref={AuditModalRef}
      title={isShowAudit?.type === 'checkBox' ? '批量操作' : '操作物料'}
      onCancel={onClose}
      onOk={onModalOk}
      confirmLoading={auditPlanLoading}
    >
      <Spin spinning={auditPlanLoading}>
        <div className={pageStyles['fromView-styles']}>
          <Form form={auditMetailFrom}>
            <Row>
              <Col span={24}>
                <Form.Item
                  label="操作结果"
                  name="checkState"
                  rules={[
                    {
                      required: true,
                      message: `请选择操作结果`,
                    },
                  ]}
                  initialValue={isShowAudit?.way == 'true' ? '1' : isShowAudit?.way == 'false' ? '2' : '1'}
                >
                  <Select
                    placeholder="请选择操作结果"
                    allowClear
                    onChange={(val) => {
                      if (!isEnter) {
                        if (val == '1') {
                          auditMetailFrom?.setFieldValue('checkResult', '通过主任办公室审议');
                        } else if (val == '2') {
                          auditMetailFrom?.setFieldValue('checkResult', '不通过主任办公室审议');
                        }
                      }
                    }}
                  >
                    {auditStateArr?.map((item) => {
                      return (
                        <>
                          <Select.Option key={item?.id} value={item?.id}>
                            {item?.name}
                          </Select.Option>
                        </>
                      );
                    })}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  label="操作意见"
                  name="checkResult"
                  rules={[
                    {
                      required: true,
                      message: `请输入操作意见`,
                    },
                  ]}
                  initialValue={isShowAudit?.way == 'true' ? '通过主任办公室审议' : isShowAudit?.way == 'false' ? '不通过主任办公室审议' : '通过主任办公室审议'}
                >
                  <Input.TextArea
                    placeholder={`请输入操作意见`}
                    showCount
                    maxLength={200}
                    autoSize={{ minRows: 2, maxRows: 4 }}
                    onChange={() => {
                      setIsEnter(true);
                    }}
                  />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </div>
      </Spin>
    </OneModal>
  );
};
